<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>菜单管理</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta http-equiv="Access-Control-Allow-Origin" content="*">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="format-detection" content="telephone=no">
        <link rel="icon" href="favicon.ico">
        <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all"/>
        <link rel="stylesheet" th:href="@{/css/index.css}" media="all"/>
        <link rel="stylesheet" th:href="@{/layui_ext/dtree/dtree.css}" media="all"/>
        <link rel="stylesheet" th:href="@{/layui_ext/dtree/font/dtreefont.css}" media="all"/>
    </head>
    <body class="childrenBody">
        <div class="layui-row">

            <!--左侧树-->
            <div class="layui-col-xs2 layui-col-sm2 layui-col-md2">
                <div class="grid-demo grid-demo-bg1">
                    <ul id="menuTree" class="dtree" data-id="0"></ul>
                </div>
            </div>

            <!--右侧表-->
            <div class="layui-col-xs10 layui-col-sm10 layui-col-md10">
                <div class="grid-demo">
                    <!--搜索框-->
                    <blockquote class="layui-elem-quote" style="margin: 20px;">
                        <div style="margin-right: 20px;">
                            <form class="layui-form" style="text-align: center">
                                <!-- 菜单名称 -->
                                <div class="layui-input-inline" style="margin-left: 10px;margin-right: 10px;">
                                    <input type="text" name="placeName" id="s_goodsPlaceName" placeholder="请输入菜单名称"
                                           autocomplete="off"
                                           class="layui-input">
                                </div>
                                <!-- 查询和添加按钮 -->
                                <a class="layui-btn layui-btn-sm" lay-submit="" lay-filter="doSearch">搜索</a>
                                <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">重置</button>
                            </form>
                        </div>
                    </blockquote>

                    <!--表-->
                    <div style="margin: 20px;">
                        <table class="layui-hide" id="menu" lay-filter="menuFilter"></table>
                    </div>

                    <!--表格框的操作-->
                    <script type="text/html" id="barDemo">
                        <a class="layui-btn layui-btn-xs" shiro:hasPermission="menu:update" lay-event="edit">编辑</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" shiro:hasPermission="menu:delete" lay-event="delete">删除</a>
                    </script>

                    <!--表格框工具条-->
                    <script type="text/html" id="toolbarDemo">
                        <a shiro:hasPermission="menu:add" class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add" id="doAdd">添加菜单</a>
                    </script>

                    <!-- 添加菜单的弹出层 -->
                    <div id="addOrUpdateDiv" style="display: none;padding: 20px;">
                        <form class="layui-form layui-form-pane" id="dataFrm" lay-filter="dataFrm"
                              style="margin-top: 20px;">
                            <!--添加菜单-->
                            <div class="layui-form-item" style="text-align: center;">
                                <div class="layui-inline">
                                    <label class="layui-form-label">父级菜单</label>
                                    <div class="layui-input-inline" style="width: 500px;">
                                        <input type="hidden" name="pid">
                                        <ul id="menuDTreeInput" class="dtree" data-id="0"></ul>
                                    </div>
                                </div>
                            </div>
                            <!-- 提交和重置按钮 -->
                            <div class="layui-input-block" style="align-items: center;">
                                <button type="button" class="layui-btn layui-btn-sm" lay-submit=""
                                        lay-filter="doSubmit">提交
                                </button>
                                <button type="reset" id="reloadFrame" class="layui-btn layui-btn-sm layui-btn-primary">
                                    重置
                                </button>
                            </div>
                        </form>
                    </div>
                    <!-- 添加商品产地的弹出层结束 -->
                </div>
            </div>
        </div>
        <script type="text/javascript" src="/layui/layui.js"></script>
        <!--<script type="text/javascript" src="/layui_ext/dtree/dtree.js"></script>-->
        <script>
            layui.extend({
                dtree: '/layui_ext/dtree/dtree'   // {/}的意思即代表采用自有路径，即不跟随 base 路径
            }).use(['dtree', 'element', 'form', 'jquery', 'layer', 'table'], function () {
                var dtree = layui.dtree;
                var layer = layui.layer;
                var $ = layui.jquery;
                var form = layui.form;
                var table = layui.table;

                var tableIndex;
                // 初始化树
                dtree.render({
                    elem: "#menuTree",
                    /*data : nodes.data,*/
                    dataFormat: "list",
                    dataStyle: "layuiStyle",
                    response: {message: "msg", statusCode: 0},
                    method : "get",
                    url: "/menu/loadMenuDTreeJson",
                    //url: "/layui_ext/dtree1.json" // 使用url加载（可与data加载同时存在）
                });

                // 初始化输入框树
                dtree.renderSelect({
                    elem: "#menuDTreeInput",
                    /*data : nodes.data,*/
                    dataFormat: "list",
                    dataStyle: "layuiStyle",
                    method : "get",
                    response: {message: "msg", statusCode: 0},
                    url: "/menu/loadMenuDTreeJson"
                    //url: "/layui_ext/dtree1.json" // 使用url加载（可与data加载同时存在）
                });


                // 绑定节点点击
                dtree.on("node('menuTree')", function (obj) {
                    //layer.msg(JSON.stringify(obj.param));
                    reloadTable(obj.param.nodeId);
                });

                function reloadTable(id) {
                    tableIndex.reload({
                        where: {
                            id: id
                        },
                        page: {
                            curr: 1
                        }
                    })
                }

                tableIndex = table.render({
                    elem: '#menu'
                    , url: '/menu/loadAllMenus'
                    , page: true //开启分页
                    , toolbar: true //开启头部工具栏，并为其绑定左侧模板
                    , title: '菜单表'
                    , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                    , limits: [10, 20, 50, 100]
                    , defaultToolbar: ['filter', 'print', 'exports']
                    , cols: [
                        [
                            {field: 'id', title: 'ID', sort: true, align: 'center'},
                            {field: 'pid', title: '父级菜单ID', align: 'center'},
                            {field: 'title', title: '菜单名称', align: 'center'},
                            {field: 'open', title: '是否展开', align: 'center'},
                            {field: 'href', title: '链接', align: 'center', templet: function (menu) {
                                    return menu.href == null ? "<span'>无</span>" : "<span>"+menu.href+"</span>";
                                }},
                            {field: 'available', title: '是否可用', sort: true, align: 'center'},
                            {field: 'ordernum', title: '排序码', align: 'center'},
                            {fixed: 'right', title: '操作', toolbar: '#barDemo', align: 'center'}
                        ]
                    ]
                });

                //获取弹出层的索引
                var addIndex;
                //监听工具栏的事件
                table.on('toolbar(menuFilter)', function (obj) {
                    switch (obj.event) {
                        case 'add':
                            addIndex = layer.open({
                                type: 1,
                                title: ['添加菜单', 'color:#fff;background-color:#01AAED;'],
                                //content属性为打开某个定义好的
                                content: $('#addOrUpdateDiv'),
                                area: ['1000px', '600px'],
                                //这个函数是防止打开弹窗后遮挡屏幕
                                success: function (layer) {
                                    var mask = $(".layui-layer-shade");
                                    mask.appendTo(layer.parent());
                                    //其中：layer是弹层的DOM对象
                                    //每次打开弹出层时刷新内容
                                    //$('#reloadFrame').click();
                                    $("#dataFrm")[0].reset();
                                }
                            });
                            break;
                    }
                });

                // 绑定节点点击
                dtree.on("node('menuDTreeInput')", function (obj) {
                    //layer.msg(JSON.stringify(obj.param));
                    //window.parent.right.reloadTable(obj.param.nodeId);
                    //alert(obj.param.nodeId);
                });

                //监控添加事件
                form.on("submit(doAdd)", function (data) {
                    //alert(data.field);
                    /*$.post('/system/goodsPlace/addGoodsPlace', data.field, function (res) {
                        if (res.code == 0) {
                            layer.confirm('是否继续录入？', {
                                btn: ['继续', '取消'] //按钮
                            }, function (myself) {
                                //无论继续输入还是取消重置按钮会被点击
                                $('#reloadFrame').click();
                                layer.close(myself);
                            }, function () {
                                //无论继续输入还是取消重置按钮会被点击
                                $('#reloadFrame').click();
                                layer.close(addIndex);
                            });
                        }else {
                            layer.msg("添加失败");
                        }
                        //不管成功还是失败,父级页面都要刷新
                        tableData.reload();
                    });*/
                    //要应用ajax提交,所以return false
                    return false;
                });
                //添加事件结束

                function openWindow(){
                    window.open("/icon/page");
                }

                //监听工具条的事件
                table.on('tool(menuFilter)', function (obj) {
                    //userTable是数据表格中lay-filter对应的事件
                    var event = obj.event;
                    var menuData = obj.data;
                    switch (event) {
                        //修改事件开始
                        case 'edit':
                            //获取修改菜单弹出层的索引
                            var editIndex;
                            //修改菜单弹出层
                            editIndex = layer.open({
                                type: 1,
                                title: '修改菜单信息',
                                //content属性为打开某个定义好的
                                content: $('#addOrUpdateDiv'),
                                area: ['1000px', '600px'],
                                success: function (layer) {
                                    //防止打开弹窗后遮挡屏幕
                                    var mask = $(".layui-layer-shade");
                                    mask.appendTo(layer.parent());
                                    $("#dataFrm")[0].reset();
                                    //其中：layer是弹层的DOM对象
                                    form.val('dataFrm', menuData);
                                    if (menuData.pid == 0) {
                                        dtree.dataInit("menuDTreeInput", 1);
                                        dtree.selectVal("menuDTreeInput");
                                    } else {
                                        dtree.dataInit("menuDTreeInput", menuData.pid);
                                        dtree.selectVal("menuDTreeInput");
                                    }
                                    //console.log(formData);
                                }
                            });
                            break;                                         b
                        //修改菜单事件结束
                        case 'delete':
                            openWindow();
                    }
                })
            });
        </script>
    </body>
</html>